import React, {Component} from 'react';
import './index.css';
import {InputNumber, Slider, Radio, Input, Upload, Icon} from 'antd';
import ColorPicker from '../../common/colorPicker/index';
import BaseOpts from '../BaseOpts';
import SlideInput from '../../common/SlideInput/index';
import MUploadImg from '../../common/mUploadImg/index';

const RadioGroup = Radio.Group;

class PageOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {},
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data
        };

    }

    componentWillReceiveProps(nextProps) {
        const {data} = nextProps;

        this.setState({
            data
        });
    }

    render() {
        var {dataset, style} = this.state.data;
        var {name:pName = '', title:pTitle = '', shareTitle = '', imageUrl = ''} = dataset;
        var bg = style.backgroundColor || '#eee';
        var paddingLeft = parseFloat(style.paddingLeft || 0);

        return (
            <div className="optsPanel">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">页面名称</label>
                    <div className="optsPanel__item__bd">
                        {pName}
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">导航条标题</label>
                    <div className="optsPanel__item__bd">
                        <Input
                            value={pTitle}
                            onInput={(e) => {
                                this.$dataChange('title', e.target.value, 'dataset');
                            }}
                            placeholder="不设则与店铺名称保持一致"
                        />
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">分享描述</label>
                    <div className="optsPanel__item__bd">
                        <Input
                            value={shareTitle}
                            onInput={(e) => {
                                this.$dataChange('shareTitle', e.target.value, 'dataset');
                            }}
                            placeholder="不设则与店铺分享配置保持一致"
                        />
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">分享图片</label>
                    <div className="optsPanel__item__bd">
                        <MUploadImg
                            imageUrl={imageUrl}
                            onChange={
                                (err, imgUrl) => {
                                    if (err) {
                                        return;
                                    }
                                    this.$dataChange('imageUrl', imgUrl, 'dataset');
                                }
                            }
                        />
                        <div className="optsPanel__item__tip">提示：系统默认自动截取当前页面做为分享图片</div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">背景颜色</label>
                    <div className="optsPanel__item__bd">
                        <ColorPicker color={bg} onChangeComplete={(color, rgba) => {
                            this.$dataChange('backgroundColor', rgba, 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">左右内边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput
                            step={1}
                            min={0}
                            max={100}
                            value={paddingLeft}
                            onChange={(val) => {
                                this.$dataChange(['paddingLeft', 'paddingRight'], [val + 'px', val + 'px'], 'style');
                            }}
                        />
                    </div>
                </div>

            </div>
        );
    }
}

export default PageOpts;
